<template>
    <div class="header">
        <h4>用户列表</h4>
        <el-button type="primary" 
        @click="addAdminFn">添加</el-button>
    </div>

    <el-table :data="userInfoArr" style="width: 100%">

        <el-table-column fixed prop="id" label="序号" width="100">
            <template #default="scope">
                <div style="display: flex; align-items: center;justify-content:center;">
                    <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>
                </div>
            </template>
        </el-table-column>

        <el-table-column prop="name" label="用户名" width="100">
            <template #default="scope">
                <div style="display: flex; align-items: center; justify-content:center;">
                    <span>{{ scope.row.username }}</span>
                </div>
            </template>
        </el-table-column>

        <el-table-column prop="mobile" label="手机号" width="100">
            <template #default="scope">
                <div style="display: flex; align-items: center; justify-content:center;">
                    <span>{{ scope.row.mobile }}</span>
                </div>
            </template>
        </el-table-column>

        <el-table-column prop="email" label="邮箱" width="100">
            <template #default="scope">
                <div style="display: flex; align-items: center; justify-content:center;">
                    <span>{{ scope.row.email }}</span>
                </div>
            </template>
        </el-table-column>

        <el-table-column prop="gender" label="性别" width="100">
            <template #default="scope">
                <div style="display: flex; align-items: center; justify-content:center;">
                    <el-tag class="ml-2" :type="scope.row.gender == 1 ? 'success' : 'danger'">{{
                        gender[Number(scope.row.gender) - 1] }}</el-tag>
                </div>
            </template>
        </el-table-column>

        <el-table-column prop="status" label="状态" width="100">
            <template #default="scope">
                <div style="display: flex; align-items: center; justify-content:center;">
                    <el-tag class="ml-2" :type="scope.row.status == 1 ? 'success' : 'danger'">{{ scope.row.status == 1 ?
                        '正常' : '禁用' }}</el-tag>
                </div>
            </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="150">
            <template #default>
                <div class="options">
                    <el-button type="primary" @click="handleClick">编辑</el-button>
                    <el-button type="primary" @click="deleteClick">删除</el-button>
                </div>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination background layout="prev, pager, next" :total="1000" />
</template>

<script setup>
import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star,
} from '@element-plus/icons-vue'
import { getUsersData, getAddUsers } from '@/api/https.js'
import { ref, reactive } from 'vue'



const currentPage = ref(1)

const pageSize = ref(10)

const userInfoArr = ref([])

const gender = ref(['男', '女', '保密'])

getUsersData({ currentPage }).then(res => {
    console.log('666', res);
    if (res.data.errNo == 0) {
        userInfoArr.value = res.data.paginate.data
    }

})

const addAdminFn = getAddUsers().then(res => {
    console.log('888',res);
    if (res.data.code == 200) {
        getUsersData()
    }
})

</script>
 
<style scoped>
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ebedf0;
    width: 100%;
    height: 70px;
    padding: 0 30px;
    margin-right: 30px;
    box-sizing: border-box;
}

.options {
    display: flex;
    align-items: center;
}
</style>